<template>
    <div class="outer-fund-group-loadin">
        <div class="header">
            <el-input
                v-model="searchParams.codeOrName"
                clearable
                placeholder="账户组分类编号/名称"
                style="width:240px"
                @keyup.enter.native="search"
                size="mini"
            >
            </el-input>
            <el-select v-model="searchParams.sourceType" placeholder="来源类型" size="mini" style="margin:0 10px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
            <el-button type="primary" size="mini" @click="search">查询</el-button>
        </div>
        <div class="table">
            <RiskTablePlus
                ref="risk-table"
                :tableData="tableData"
                :tableConfig="tableConfig"
                :column="columns"
                :searchParams="searchParams"
                @page-change="getTableData"
                v-loading="tableLoading"
            >
                <template #operation="{ row }">
                    <RiskIconButton type="primary" icon="el-icon-edit" topTitle="编辑" @on-click="editRow(row)"></RiskIconButton>
                    <!-- v-authCode="B_0191" -->
                </template>
            </RiskTablePlus>
        </div>
        <!-- 编辑弹框 -->
        <yh-dialog title="导入设置" :visible.sync="editDialog" width="450px" :close-on-click-modal="false" :close-on-press-escape="false" drag>
            <el-form label-width="130px" style="width:100%;">
                <el-row>
                    <el-form-item label="账户组分类编号">
                        <el-input v-model="editInfo.groupType" size="mini" disabled></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="账户组分类名称">
                        <el-input v-model="editInfo.groupTypeFullName" size="mini" disabled></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="是否要导入">
                        <el-select v-model="editInfo.needImport" size="mini" placeholder="请选择" style="width:100%">
                            <el-option v-for="(value, key) in isOrNotPojo" :key="key" :value="key" :label="key + ' ' + value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleBtn('cancel')">取 消</el-button>
                <el-button type="primary" @click="handleBtn('confirm')">确 定</el-button>
            </span>
        </yh-dialog>
    </div>
</template>
<script lang="ts">
import RiskIconButton from '@/common/components/risk-icon-button.vue';
import RiskTablePlus from '@/common/components/risk-table-plus.vue';
import { ColumnVO, PageVO, TableConfigVO } from '@/common/vo';
import { dateFormat } from '@/utils/tools';
import { getUser } from '@/utils/user-util';
import { Vue, Component } from 'vue-property-decorator';
import Dict from '../dict/index';

@Component({
    name: 'OuterFGLoadin',
    components: {
        RiskTablePlus,
        RiskIconButton,
    },
})
export default class OuterFGLoadin extends Vue {
    searchParams: any = {
        codeOrName: '',
        sourceType: '',
    };

    tableDataList: any[] = [];
    tableData: any = [];

    tableConfig: TableConfigVO = {
        rowKey: 'groupType', // 主键key
        allRowKeys: [], // 所有页数据的key集合
    };

    tableLoading: boolean = false;
    columns: ColumnVO[] = [
        {
            title: '账户组分类编号',
            field: 'groupType',
        },
        {
            title: '账户组分类名称',
            field: 'groupTypeFullName',
        },
        {
            title: '数据来源',
            field: 'sourceType',
            render: value => new Dict().SourceType[value] || '--',
            align: 'center',
        },
        {
            title: '是否要导入',
            field: 'needImport',
            align: 'center',
            render: value => (value ? '是' : '否'),
        },
        {
            title: '导入设置更新人',
            field: 'modifyUser',
        },
        {
            title: '更新日期',
            field: 'modifyDate',
            align: 'center',
            render: value => dateFormat(value),
        },
        {
            title: '操作',
            field: 'operation',
            fixed: 'right',
            width: 90,
            align: 'center',
        },
    ];

    private options: any[] = [
        {
            value: '',
            label: '全部',
        },
        {
            value: '2',
            label: '恒生-主动',
        },
        {
            value: '5',
            label: '恒生-被动',
        },
    ];

    isOrNotPojo = {
        '0': '否',
        '1': '是',
    };

    editDialog: boolean = false;
    editInfo: any = {};
    oldEditInfo: any = {};
    mounted() {
        this.getTableData();
    }

    // 表格数据
    getTableData() {
        this.tableLoading = true;
        return new Promise((resolve, reject) => {
            this.$axios({ method: 'get', url: '/fundGroup/queryFundGroupType' })
                .then((res: any) => {
                    this.tableDataList = res;
                    this.selectByParams();
                    resolve(res);
                })
                .catch(err => {
                    reject(err);
                })
                .finally(() => {
                    this.tableLoading = false;
                });
        });
    }

    // 查询
    private selectByParams(): void {
        const tableDataSearched = this.handleFilter(this.tableDataList, this.searchParams.codeOrName, 'groupType', 'groupTypeFullName');
        this.tableData = tableDataSearched.filter(item => {
            return this.searchParams.sourceType === '' || item.sourceType === this.searchParams.sourceType;
        });
    }

    // 账户组筛选数据
    private handleFilter(dataSource: any, param: any, code: string, name: string): any {
        if (!param || !dataSource) {
            return dataSource;
        } else {
            return dataSource.filter((item: any) => {
                return (
                    (item[name] || '').toUpperCase().includes(param.toUpperCase()) || (item[code] || '').toUpperCase().includes(param.toUpperCase())
                );
            });
        }
    }

    // 查询
    search() {
        this.getTableData();
    }

    // 点击行编辑
    editRow(row: any) {
        this.editInfo = JSON.parse(
            JSON.stringify({ groupType: row.groupType, groupTypeFullName: row.groupTypeFullName, needImport: row.needImport ? '1' : '0' })
        );
        this.oldEditInfo = JSON.parse(JSON.stringify(this.editInfo));
        this.editDialog = true;
    }

    // 编辑点击
    handleBtn(type: string) {
        console.log(getUser(), 'getUser()');

        if (type == 'cancel') {
            this.editDialog = false;
        } else if (type == 'confirm') {
            const isSame = JSON.stringify(this.oldEditInfo) == JSON.stringify(this.editInfo);
            console.log(isSame, '-----------------');
            if (isSame) {
                this.yh_message_success('账户组分类信息无修改！');
                return;
            }

            this.$axios
                .post('/fundGroup/importStatus/update', {
                    ...this.editInfo,
                    needImport: this.editInfo.needImport == '1',
                    modifyUser: getUser().userName,
                })
                .then((res: any) => {
                    this.yh_message_success('修改成功！');
                    this.getTableData();
                })
                .catch(() => {})
                .finally(() => {
                    this.editDialog = false;
                });
        }
    }
}
</script>
<style lang="scss">
.outer-fund-group-loadin {
    .header {
        padding: 6px;
        border: 1px solid #ccc;
    }
    .table {
        width: 100%;
        height: calc(100vh - 100px);
        margin: 0 auto;
    }
}
</style>
